import React, { Component } from 'react'

export default class Item extends Component {
    render() {
        let item = this.props;
        
        return (
            <li key={item.id}>
                <label>
                    <input type="checkbox" tid={item.id}  checked={item.done}  onChange={this.change(item.id)} />
                    <span>{item.title}</span>
                </label>
                <button onClick={this.remove(item.id)} className="btn btn-danger" style={{ display:  item.done ? 'block' : 'none' }}>删除</button>
            </li>
        )
    }

    //改变多选框的状态事件
    change = (id) => {
        //获取当前多选框按下之后的状态是什么
        // console.log(e.target.checked);
        //调用props属性中的方法
        //获取 id 与点之后的状态
        // let id = e.target.getAttribute('tid');
        // let status = e.target.checked;
        // this.props.checkTodo(id, status);

        
        return (e) => {
            let status = e.target.checked;
            this.props.checkTodo(id, status);
        }
    }

    //删除任务的实践
    remove = (id) => {
        //返回一个函数, 作为事件的回调
        return () => {
            this.props.removeTodo(id);
        }
    }
}
